<%--
  Created by IntelliJ IDEA.
  User: Lili_Could
  Date: 2025/9/27
  Time: 下午2:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    // 如果用户已经登录，则重定向到对应的角色主页
    if (session.getAttribute("user") != null && session.getAttribute("role") != null) {
        String role = (String) session.getAttribute("role");
        response.sendRedirect(request.getContextPath() + "/page/" + role + "/index.jsp");
        return;
    }
%>
<html>
<head>
    <title>学生成绩管理系统 - 登录</title>
    <link rel="icon" href="${pageContext.request.contextPath}/static/login.svg?v=1.0">
    <meta charset="UTF-8">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: #e1e1e1;
        min-height: 100vh;
        font-family: 'Microsoft YaHei', Arial, sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-box {
        width: 400px;
        padding: 40px 30px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        text-align: center;
        backdrop-filter: blur(10px);
        animation: slideUp 0.6s ease-out;
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .login-title {
        font-size: 28px;
        color: #333;
        margin-bottom: 30px;
        font-weight: 600;
    }

    .login-title i {
        color: #667eea;
        margin-right: 10px;
    }

    .form-group {
        margin-bottom: 25px;
        text-align: left;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #555;
        font-weight: 500;
        font-size: 14px;
    }

    .form-group input, .form-group select {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid #e1e1e1;
        border-radius: 8px;
        font-size: 16px;
        transition: all 0.3s ease;
        outline: none;
        /* 隐藏原生下拉箭头 */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .form-group input:focus, .form-group select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-group input::placeholder {
        color: #aaa;
    }

    .sub-btn {
        width: 100%;
        padding: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 10px;
    }

    .sub-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }

    .sub-btn:active {
        transform: translateY(0);
    }

    .role-select {
        position: relative;
    }

    .role-select::after {
        content: '▼';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #999;
        font-size: 12px;
    }
    /* 加载动画 */
    /* 添加到现有的CSS部分 */
    .loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .loading.active {
        opacity: 1;
        visibility: visible;
    }

    .loading-box {
        display: flex;
        gap: 10px;
    }

    .loading-dot {
        width: 12px;
        height: 12px;
        background: #667eea;
        border-radius: 50%;
        animation: bounce 1.5s infinite ease-in-out;
    }

    .loading-dot:nth-child(2) {
        animation-delay: 0.1s;
        background: #764ba2;
    }

    .loading-dot:nth-child(3) {
        animation-delay: 0.2s;
        background: #667eea;
    }

    .loading-dot:nth-child(4) {
        animation-delay: 0.3s;
        background: #764ba2;
    }

    @keyframes bounce {
        0%, 80%, 100% {
            transform: scale(0);
            opacity: 0.5;
        }
        40% {
            transform: scale(1);
            opacity: 1;
        }
    }

</style>
<body>
<div class="main-box">
    <h2 class="login-title">学生成绩管理系统</h2>
    <form action="${pageContext.request.contextPath}/api/login" id="login-form" class="form-box" method="post">
        <div class="form-group">
            <label for="user_no">学工号</label>
            <input type="text" name="user_no" id="user_no" placeholder="请输入学工号" value="${requestScope.user_no}" required>
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" placeholder="请输入密码" required>
        </div>

        <div class="form-group">
            <label for="role">角色</label>
            <div class="role-select">
                <select name="role" id="role">
                    <option value="student" selected>学生</option>
                    <option value="teacher">教师</option>
                    <option value="admin">管理员</option>
                </select>
            </div>
        </div>

        <input type="submit" value="登录" class="sub-btn">
        <p style="color: red;margin: 5px">${requestScope.error}</p>
    </form>
</div>

<div class="loading">
    <div class="loading-box">
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
    </div>
</div>


</body>
<!-- 在</body>标签前添加 -->
<script>
    document.getElementById('login-form').addEventListener('submit', function() {
        document.querySelector('.loading').classList.add('active');
    });
</script>

</html>